<template>
	<view class="box">
		<text class="title">{{serviceList.name}}</text>
		<image :src="serviceList.imgUrl" mode=""></image>
		<view class="price">
			<text class="amount">￥{{serviceList.salePrice / 100}}</text>
			<text class="unamount">￥{{serviceList.initPrice / 100}}</text>
		</view>
		<view class="remark">
			<text class="title">服务详情</text>
			<text class="content">{{serviceList.serviceInfoStr}}</text>
		</view>
		<view class="remark">
			<text class="title">购买须知</text>
			<text class="content">{{serviceList.remark}}</text>
		</view>
	</view>
	<button class="btn" @click="bindPay">立即购买</button>
</template>

<script setup>
	import {
	
		productShowInfo,
		orderPreService
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		wxOpenid
	} from '@/utils/login-sdk.js'
	const serviceList = ref()
	onLoad((params) => {
		getData(params.id)
	})
	const getData = async(id)=>{
		const service = await productShowInfo({
			id: id,
		})
		serviceList.value = service.result
	}
	const bindPay = async()=>{
		const {memberId} = await wxOpenid()
		const res = await orderPreService({memberId:memberId,productInfoId:serviceList.value.id})
		uni.navigateTo({
			url:"/pages/pay/pay?preOrderId="+res.result.preOrderId+'&token='+res.result.token+'&orderAmount='+serviceList.value.salePrice+'&businessType=4'
		})
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.box {
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 18rpx auto;
		.title{
			font-size: 30rpx;
			color: #16191B;
			display: block;
		}
		image{
			display: block;
			width: 630rpx;
			height: 312rpx;
			
			border-radius: 16rpx;
			margin-top: 24rpx;
		}
		.price{
			margin-top: 32rpx;
			margin-bottom: 26rpx;
			.amount{
				font-weight: bold;
				font-size: 36rpx;
				color: #ED4538;
				margin-right: 18rpx;
			}
			.unamount{
				font-size: 26rpx;
				color: #A1A1A1;
				text-decoration: line-through;
			}
		}
		.remark{
			width: 570rpx;
			
			padding: 30rpx;
			background: #F6F6F6;
			border-radius: 29rpx;
			margin: 15rpx auto;
			.content{
				display: block;
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #9C9C9C;
			}
		}
	}

	.btn{
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254,155,35,0.25);
		border-radius: 28rpx;
		line-height: 100rpx;
		color: #fff;
		font-weight: bold;
		font-size: 36rpx;
		position: absolute;
		left:55rpx;
		bottom: 107rpx;
	}


</style>